<template>
    <div>
        <div class="button-group">
            <el-button type="primary" size="small" @click="addUser">新增</el-button>
        </div>
        <el-table :data="listData" class="table" style="width: 100%">
            <el-table-column prop="id" label="Id" width="100">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="300">
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="300">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="200">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-switch v-model="scope.row.activeFlag" @click="changeFlag(scope.row)" inactive-color="#409EFF"
                        active-color="#F56C6C">
                    </el-switch>
                    <el-button class="edit" type="primary" size="small">编辑</el-button>
                    <el-button class="edit" type="danger" size="small" @click="deleteItem(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialog" title="新增用户" width="500">
            <el-form :model="form" ref="formRef" label-width="90px" label-position="left">
                <el-form-item label="用户名:" prop="username" :rules="[
                {
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                },
                {
                    min: 6, max: 20, message: '长度至少为6,长度最大为20', trigger: 'blur'
                }]">
                    <el-input v-model="form.username" placeholder="请输入用户名" class="userName-input" />
                </el-form-item>
                <el-form-item prop="password" label="密码:" class="el-form-item" :rules="[
                {
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                },
                {
                    min: 10, max: 20, message: '长度最至少为10,最大长度为20'
                }]">
                    <el-input v-model="form.password" type="password" placeholder="请输入密码" class="userName-input" />
                </el-form-item>
                <el-form-item prop="repassword" class="el-form-item" label="确认密码:" :rules="[
                {
                    required: true,
                    message: '请输入确认密码',
                    trigger: 'blur'
                }
                ,
                {
                    min: 10, max: 20, message: '长度最至少为10,最大长度为20'
                }]">
                    <el-input v-model="form.repassword" type="password" placeholder="请输入密码" class="userName-input" />
                </el-form-item>
                <el-form-item label="邮箱:" class="el-form-item" prop="emaill" :rules="[
                    {
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    },
                    {
                        type: 'email',
                        message: '需要为邮箱类型',
                        trigger: 'blur'
                    }
                ]">
                    <el-input v-model="form.emaill" placeholder="请输入邮箱" class="userName-input" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialog = false">取消</el-button>
                    <el-button type="primary" @click="SubmitAddUser(formRef)">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { list, add, edit } from '../../api/user'
import dayjs from 'dayjs'

import type { FormInstance } from 'element-plus'
import type { max } from 'lodash';

const formRef = ref<FormInstance>()

var page = reactive({
    page: 0,
    limit: 10,
    sort: "create_time,desc"
})

var dialog = ref(false);

var form = reactive<{
    username: String,
    repassword: String,
    password: String,
    emaill: String
}>({ username: "", repassword: "", password: "", emaill: "" })

var listData = ref([]);

const addUser = () => {

    dialog.value = true;
}

const deleteItem = async (item: any) => {

    let id = item.id;

    let activeFlag = item.active_flag;

    let deleted = item.deleted;

    let password = item.password;

    var data = [{ id, activeFlag: activeFlag, password, deleted: deleted ? 0 : 1 }];

    await edit(data);

    await list(page);


}

const SubmitAddUser = (formRef: FormInstance | undefined) => {
    if (!formRef) return
    formRef.validate(async (valid) => {
        if (valid) {

            await add(form);

            list(page)
            
        } else {

            return false

        }
    })
}


const changeFlag = async (item: any) => {


    let id = item.id;

    let activeFlag = item.active_flag;

    let deleted = item.deleted;

    let password = item.password;

    var data = [{ id, activeFlag: activeFlag ? 0 : 1, password, deleted: deleted ? 1 : 0 }];

    await edit(data);

    await list(page)

}

const activeUser = (user: any) => {
    console.log("d", user)
}

onMounted(async () => {

    let result = await list(page);

    const resultListData = result.list;

    var listArray2: any = new Array();

    for (var item in resultListData) {

        var createTime = dayjs(resultListData[item].create_time).format("YYYY-MM-DD HH:mm:ss");

        var activeFlag = !resultListData[item].active_flag;

        listArray2.push({ activeFlag, ...resultListData[item], createTime });



    }

    listData.value = listArray2

})



</script>
<style scoped>
.userName-input {
    width: 320px;
}

.el-form-item {
    margin-top: 26px;
}

.button-group {
    height: 60px;
    line-height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f7f7f7;
}

.edit {
    margin-left: 20px;
}
</style>